<template>
  <base-breadcrumb>
    <a-card>
      <TitleName title="搜索"></TitleName>
      <a-form>
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-item
              label="所属分公司"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <a-select placeholder="请选择">
                <a-select-option value="0">是</a-select-option>
                <a-select-option value="1">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-item
              label="所属项目"
              :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
              :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <a-select placeholder="请选择">
                <a-select-option value="0">是</a-select-option>
                <a-select-option value="1">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="addSearch">搜索</a-button>
              <a-button style="margin-left: 8px" @click="addEmpty">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
        <div v-if="advanced">
          <a-row :gutter="24">
            <a-col :md="8" :sm="8">
              <a-form-item
                label="方案名称"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <BaseInput placeholder="" v-model="queryParam.vompletedBy" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item
                label="方案类型"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <a-select placeholder="请选择">
                  <a-select-option value="0">是</a-select-option>
                  <a-select-option value="1">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="6">
              <a-form-item
                label="计划报审时间"
                :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                :wrapperCol="{ lg: { span: 15 }, sm: { span: 15 } }"
              >
                <a-range-picker />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item
                label="要求审批完成时间"
                :labelCol="{ lg: { span: 9 }, sm: { span: 9 } }"
                :wrapperCol="{ lg: { span: 13 }, sm: { span: 13 } }"
              >
                <a-range-picker />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item
                label="报审时间"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <a-range-picker />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item
                label="报审状态"
                :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <a-select placeholder="请选择">
                  <a-select-option value="0">是</a-select-option>
                  <a-select-option value="1">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </a-card>
    <a-card>
      <div class="table-operator">
        <TitleName title="施组(方案)清单"></TitleName>
        <a-button @click="check" class="mb20" type="primary">计划审核清单</a-button>
        <div class="pub-table-select-count">
          <a-icon type="info-circle" theme="twoTone" />
          <span>
            施组（方案）计划审批数:
            <a>{{ 0 || 0 }}</a
            >，
          </span>
          <span>
            已审批方案数:
            <a>{{ 0 || 0 }}</a
            >，
          </span>
          <span>
            施组（方案）审批率为:
            <a>{{ 0 || 0 }}%</a>
          </span>
        </div>
      </div>
      <!-- <p>施组（方案）计划审批数 30 ，已审批方案数 18，施组（方案）审批率为：60%</p> -->
      <a-table :data-source="dataSource" :columns="columns">
        <span slot="description" slot-scope="text">
          <ellipsis :length="8" tooltip>{{ text }}</ellipsis>
        </span>
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <!-- 操作 -->
        <span slot="operation" slot-scope="text, record">
          <template>
            <span>1201-08-30</span>
            <a-divider type="vertical" />
            <a @click="addEdit(record)">查看</a>
          </template>
        </span>
      </a-table>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import TitleName from '@/components/TitleName/index.vue'
import { getPlanList } from '@/api/technical/approvalPlan'
const columns = [
  {
    title: '序号',
    width: '65px',
    scopedSlots: { customRender: 'serial' },
  },
  {
    title: '方案名称',
    dataIndex: 'schemeName',
  },
  {
    title: '所属分公司',
    dataIndex: 'branchCompany',
  },
  {
    title: '所属项目',
    dataIndex: 'projectName',
  },
  {
    title: '方案类别',
    dataIndex: 'schemeCategory',
  },
  {
    title: '计划报审时间',
    dataIndex: 'planReviewTime',
  },
  {
    title: '要求审批完成时间',
    dataIndex: 'reviewEndTime',
  },
  {
    title: '审批其他需求',
    dataIndex: 'reviewOtherRequirements',
  },
  {
    title: '报审时间',
    dataIndex: 'reviewTime',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: '150px',
    scopedSlots: { customRender: 'operation' },
  },
]
export default {
    name:'a'+Date.now(),  components: {
    TitleName,
  },
  data() {
    this.columns = columns
    // this.dataSource = dataSource
    return {
      advanced: false,
      queryParam: {},
      dataSource: [],
    }
  },
  created() {
    this.getPlanList()
  },
  methods: {
    addEmpty() {},
    addSearch() {},
    // 展开收起状态
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getPlanList() {
      getPlanList().then((res) => {
        this.dataSource = Array.isArray(res.data) ? res.data : []
      })
    },
    check() {
      this.$router.push({
        path: '/technical/ShiGroup',
      })
    },
    addEdit(record) {
      this.$router.push({
        path: '/technical/ShiGroup/Approval/EditFrom',
        query: {
          type: 'view',
          id: record.id,
        },
      })
    },
  },
}
</script>

<style>
</style>
